<template>
  <div class="pending-approval">
    <div class="header-bar" style="justify-content: flex-end;">
      <el-input
        placeholder="请输入单据编号"
        style="width: 250px; float: right; margin-bottom: 10px;" 
        v-model="queryParams.keyword"
        @keyup.enter="handleSearch"
        clearable
      >
        <template #append>
          <el-button icon="Search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>
    <!-- 待审批表格 -->
    <el-table v-loading="loading" :data="approvalList" border style="width: 100%">
      <el-table-column prop="requestNo" label="单据编号" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="content" label="申请原因" min-width="200" show-overflow-tooltip>
        <template #header>
          <div class="header-search-container">
            <span>申请原因</span>
            <el-popover placement="bottom" width="250" trigger="click">
              <template #reference>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
              <el-input 
                v-model="queryParams.content" 
                placeholder="请输入申请原因" 
                clearable
                width="200"
                @keyup.enter="handleSearch"
              />
              <div style="text-align: right; margin-top: 10px;">
                <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
                <el-button size="small" @click="clearSearch('content')">重置</el-button>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="applicantName" label="申请人" min-width="150" show-overflow-tooltip>
        <template #header>
          <div class="header-search-container">
            <span>申请人</span>
            <el-popover placement="bottom" width="250" trigger="click">
              <template #reference>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
              <el-input 
                v-model="queryParams.applicantName" 
                placeholder="请输入申请人" 
                clearable
                width="200"
                @keyup.enter="handleSearch"
              />
              <div style="text-align: right; margin-top: 10px;">
                <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
                <el-button size="small" @click="clearSearch('applicantName')">重置</el-button>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="handleApprove(scope.row)"> 审批 </el-button>
          <el-button type="warning" link @click="handleTransfer(scope.row)"> 转交 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup name="PendingApproval">
import { ref, reactive, onMounted, watch, defineProps } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getApprovalListByStatus
} from '@/api/personCenter'

// 定义事件
const emit = defineEmits(['approve', 'transfer'])
// 定义props
const props = defineProps({
  currentTab: {
    type: String,
    default: ''
  }
})

// 表格数据
const loading = ref(false)
const approvalList = ref([])
const total = ref(0)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: '01',
})

// 获取待审批列表
const getPendingList = async () => {
  loading.value = true
  getApprovalListByStatus(queryParams).then(res => {
    if (res.code === 200) {
      approvalList.value = res.data?.list || []
      total.value = res.data?.total || 0
      loading.value = false
    } else {
      ElMessage.warning('查询待审批列表失败')
    }
  }).catch(() => {
    approvalList.value = []
    total.value = 0
    loading.value = false
    ElMessage.error('查询待审批列表失败')
  }).finally(() => {
    loading.value = false
  })
}

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  getPendingList()
}

// 清空申请原因搜索
const clearSearch = (field) => {
  queryParams[field] = ''
  getPendingList()
}



// 重置查询
// const resetQuery = () => {
//   Object.assign(queryParams, {
//     pageNum: 1,
//     pageSize: 10,
//     requestNo: '',
//     applicantName: '',
//     content: '',
//     dateRange: []
//   })
//   getPendingList()
// }

// 分页处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getPendingList()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  getPendingList()
}

// 审批
const handleApprove = (row) => {
  emit('approve', row)
}

// 转交
const handleTransfer = (row) => {
  emit('transfer', row)
}

// 初始化
onMounted(() => {
  getPendingList()
})

// 监听tab变化，重新加载数据
watch(() => props.currentTab, (newTab) => {
  if (newTab === 'pending') {
    getPendingList()
  }
}, { immediate: false })

// 暴露方法给父组件
defineExpose({
  getPendingList
})
</script>

<style lang="scss" scoped>
.filter-item {
  margin-right: 10px;
  margin-bottom: 10px;
}
.search-icon,
.calendar-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #409eff;
}

.search-icon:hover,
.calendar-icon:hover {
  color: #66b1ff;
}
</style>
